import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import TopHeader from './TopHeader';
import Footer from './Footer';
import Home from './Home';
import { loginCloudMusic } from './Data/jaxData';
import '../css/main.scss';
import { cloudMusicAxios } from './Data/jaxData';
import _ from 'lodash';

export let SongsId;
// eslint-disable-next-line
export let SongsDetail = new Array();

async function requestDataList() {
      //请求歌单所有歌曲的ID
      cloudMusicAxios.get('/playlist/detail', {
            params: {
                  id: 83699988,
            }
      })
            .then((response) => {
                  let Songs = response.data.privileges;
                  SongsId = _.map(Songs, 'id');
                  //请求到所有歌曲的详细信息
                  _.times(SongsId.length, (i) => {
                        cloudMusicAxios.get('/song/detail', {
                              params: {
                                    ids: SongsId[i],
                              }
                        })
                              .then((response) => {
                                    SongsDetail.push(response.data.songs);
                              })
                              .catch((error) => {
                                    console.log(error);
                              });

                  });
            })
            .catch((error) => {
                  console.log(error);
            });
}
requestDataList();

class Main extends Component {

      constructor(props) {
            super(props);
            this.state = {
                  WarningDisplay: 'block'
            }
            //检测屏幕尺寸
            if (document.documentElement.scrollWidth > 800) {
                  setTimeout(() => {
                        this.setState({
                              WarningDisplay: 'none'
                        });
                  }, 100)
            }
      }

      //载入页面时登录网易云音乐并保留cookie
      componentDidMount() {
            loginCloudMusic();
            let warningContainer = document.querySelector('.warning-container');
            let windowHeight = document.documentElement.scrollHeight;
            warningContainer.style.height = windowHeight * 0.1 + 'rem';
      }

      render() {
            return (
                  <div className="main-container">
                        <TopHeader />
                        <Home />
                        {this.props.children}
                        <Footer />
                        <div style={{ display: this.state.WarningDisplay }} className="warning-container">
                              <div className="flex-container">
                                    请使用PC或PAD访问本站
                              </div>
                        </div>
                  </div>

            )
      }
}

export default withRouter(Main);
